import { View } from '@tarojs/components'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import { AtTag } from 'taro-ui'
import './index.less'

const listData = [
    {
        text: '春季',
        val: 1
    },
    {
        text: '夏季',
        val: 2
    },
    {
        text: '秋季',
        val: 3
    },
    {
        text: '冬季',
        val: 4
    },
]

type propsType = {
    cols?: Array<Number>,
    curVal?: { val: number, text?: string }
}

const defaultVal = {
    cols: [3, 3, 3, 3]
}

function TagsPanel(props: propsType, ref) {
    const [cols,] = useState(props?.cols ? props.cols : defaultVal.cols)
    const [atCol, setAtCol] = useState<Array<String>>([`at-col-${cols[0]}`])
    const [curVal, setCurVal] = useState(props?.curVal ?? { val: -1, text: '' })

    useImperativeHandle(
        ref,
        () => ({
            curVal
        }),
    )

    useEffect(() => {
        const arr: Array<String> = []
        cols.forEach(v => arr.push(`at-col-${v}`))
        setAtCol(arr)
    }, [cols])

    return <View className='tags-panel at-row at-row--wrap'>
        {
            listData.map(({ text, val }, k) => {
                return <View className={`at-col ${atCol} bottomMargin`} key={k}>
                    <AtTag name={text} type='primary' onClick={() => setCurVal({ text, val })} active={curVal.val === val}>{text}</AtTag>
                </View>
            })
        }
    </View>
}

export default forwardRef(TagsPanel)